<!DOCTYPE html>
<Html lang="en">    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>
    <!--挂载点-->
    <div id="app">
        <h4 class="gray thin">未采用v-bind绑定样式</h4>
        <h4 v-bind:class="{gray:true,thin:isActive}">1.使用对象进行v-bind绑定样式</h4>
        <h4 v-bind:class="['gray','thin']">2.使用数组进行v-bind绑定样式</h4>
        <h4 v-bind:class="['gray',{'thin':isActive}]">3.数组里面嵌套对象</h4>
        <h4 v-bind:class="['gray',isActive?'thin':'']">4.使用对象变量进行v-bind绑定样式</h4>
    </div>
    <script>
        const roorComponent={
            data(){
                return{
                    isActive: false
                }
            }
        }
        const vueAPP=Vue.createApp(roorComponent)
        vueAPP.mount('#app')
    </script>
    <style>
        .gray {
            color:rgb(209,206,206);
        }
       .thin {
            font-weight: 200;
        }
    </style>